class Swiper {
    constructor(el, obj) {
        // 获取标签
        this.container = this.getDom(el); //总的大盒子
        this.wrapper = this.getDom('.swiper-wrapper', this.el); //图片的盒子
        // console.log(this.wrapper)
        this.slider = this.wrapper.children; //所有的slider
        // console.log(this.slider)
        this.prev = this.getDom('.swiper-button-prev', this.el); //获取上一个的按钮
        this.next = this.getDom('.swiper-button-next', this.el); //获取下一个的按钮
        this.pagination = this.getDom('.swiper-pagination', this.el); //获取下面的按钮的盒子

        //默认的一些属性
        this.default = {
            direction: 'horizontal',
            autoplay: 2000,
            page: 0
        };
        //合并属性
        this.options = Object.assign({}, this.default, obj)

        this.init()
    }

    //获取节点
    getDom(ele, parent) {
        return typeof ele === 'object' ? ele : (parent || document).querySelector(ele)
    }

    init() {
        //设置图片盒子的style格式
        this.setstyle();

        //设置pagination 的小圆点,并且给第一个添加类
        this.options.pagination && this.creatpage()

        //点击上一个，下一个
        this.options.navigation && this.prenext()

        //自动轮播
        this.options.autoplay && this.autoplay()


    }

    //设置图片盒子的style格式
    setstyle() {
        this.width = this.container.offsetWidth;
        this.height = this.container.offsetHeight;

        //获取slide的数量
        this.length = this.slider.length;

        //判断轮播的方向，是横着，还是竖着
        if (this.options.direction == 'horizontal') { //横着轮播
            this.wrapper.style.width = `${this.width*this.length}px`;
            this.wrapper.style.height = `${this.height}px`;
            //console.log(this.slider)
            Array.from(this.slider).forEach((i) => {
                i.style.float = 'left'
            })
        } else {
            this.wrapper.style.width = `${this.width}px`;
            this.wrapper.style.height = `${this.height*this.length}px`;
            this.slider.forEach((i) => {
                i.style.float = 'none'
            })
        }

        //每个slider的宽高
        Array.from(this.slider).forEach((i) => {
            i.style.width = `${this.width}px`;
            i.style.height = `${this.height}px`;
        })
    }

    //设置pagination 的小圆点,并且给第一个添加类
    creatpage() {
        this.pagination.innerHTML = ''
        for (let i = 0; i < this.length; i++) {
            let li = document.createElement('li');
            this.pagination.appendChild(li);
            if (i == 0) {
                li.classList.add('yellow')
            }
        }
    }

    //点击上一个，下一个
    prenext() {
        // 标签上一个的点击事件
        this.prev.onclick = () => {
            this.options.page--;
            this.options.page = this.options.page < 0 ? this.length - 1 : this.options.page;
            this.addclass()
            this.move()
        }

        // 标签下一个的点击事件
        this.next.onclick = () => {
            this.options.page++;
            this.options.page = this.options.page > this.length - 1 ? 0 : this.options.page
            this.addclass()
            this.move()
        }
    }

    //照片盒子的移动
    move() {
        let style = this.options.direction == 'horizontal' ? 'marginLeft' : 'marginTop';
        let type = this.options.direction == 'horizontal' ? 'width' : 'height';
        //console.log(this.options.page, this[type])
        this.wrapper.style[style] = `-${this.options.page*this[type]}px`;
        this.wrapper.style.transition = 'all .3s'
    }

    autoplaynext() {
        //console.log(11)
        this.options.page++;
        this.options.page = this.options.page > this.length - 1 ? 0 : this.options.page
        this.addclass()
        this.move()
    }

    //自动轮播
    autoplay() {
        this.container.onmouseenter = () => {
            clearInterval(timer)
        }
        this.container.onmouseleave = () => {
            this.autoplay()
        }
        let timer = setInterval(() => {
            this.autoplaynext()
        }, this.options.autoplay)
    }

    //添加类
    addclass() {
        Array.from(this.pagination.children).forEach((i) => {
                i.classList.remove('yellow');
            })
            //console.log(this.options.page)
        this.pagination.children[this.options.page].classList.add('yellow')
    }
}